<!DOCTYPE html>
<html>
<head>
    <title>Zabuto | Calendar | Basic Usage</title>
    <meta name="robots" content="noindex, nofollow">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- jQuery CDN -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- Example style -->
    <link rel="stylesheet" type="text/css" href="//zabuto.com/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Zabuto Calendar -->
    <script src="../zabuto_calendar.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../../css/frame/calendars/zabuto_calendar.min.css">

</head>
<body>

<!-- container -->
<div class="container example">

    <h1>
        Calendar <span>Basic Usage</span>
        <ul class="nav nav-pills pull-right">
            <li><a class="pull-right" href="index.html">^ Example Index</a></li>
            <li><a class="pull-right" href="language_settings.html">Language Settings &raquo;</a></li>
        </ul>
    </h1>

    <hr>

    <p>The calendar needs <a href="http://jquery.com/" target="_blank">jQuery</a>, and
        <a href="http://getbootstrap.com" target="_blank">Twitter Bootstrap</a> to function properly.
        After including these libraries the plugin can be used by requiring the javascript and stylesheet file.
        Then view the calendar by defining a DOM-element and initializing the plugin.</p>

    <hr>

    <div class="row">
        <div class="col-xs-5">

            <div id="my-calendar"></div>

            <script type="application/javascript">
                $(document).ready(function () {
                    $("#my-calendar").zabuto_calendar();
                });
            </script>

        </div>
        <div class="col-xs-6 col-xs-offset-1">

<code>
&lt;!-- include jQuery / Bootstrap --&gt;
...

&lt;!-- include the calendar js and css files --&gt;
&lt;script src=&quot;zabuto_calendar.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;zabuto_calendar.min.css&quot;&gt;

&lt;!-- define the calendar element --&gt;
&lt;div id=&quot;my-calendar&quot;&gt;&lt;/div&gt;

&lt;!-- initialize the calendar on ready --&gt;
&lt;script type=&quot;application/javascript&quot;&gt;
    $(document).ready(function () {
        $(&quot;#my-calendar&quot;).zabuto_calendar();
    });
&lt;/script&gt;
</code>

        </div>
    </div>

</div>
<!-- /container -->

</body>
</html>
